<template>
	<view class="finance-page">
		<uv-sticky>
			<view class="finace-header">
				<uni-datetime-picker v-model="data.date_time" type="daterange" @change="maskClick" />
				<view style="width: 100px;margin-left: 10rpx;"> <uni-data-select v-model="value" :localdata="range"
						@change="change"></uni-data-select></view>

			</view>

		</uv-sticky>
		<view class="finance-list">
			<view class="finance-item" v-for="(item,key) in list">
				<view class="finace-top">
					<view class="left">
						<i class="Ticonfont Ticon-caiwu"></i>
						<span class="name">{{item.name}}</span>
					</view>
					<span class="time" v-if="item.unt == 1">(收入)</span>
					<span class="time" v-if="item.unt == 2">(支出)</span>
				</view>
				<view class="finace-cont">
					<view class="cont-top">
						<view class="dj">
							<span class="title">单价：</span>{{item.price}} <span class="dw"
								v-if="item.unit != null">({{item.unit}})</span>
						</view>
						<view class="gg">
							<span class="title">数量：</span>{{item.num}}<span class="dw"></span>
						</view>
						<view class="zj">
							<span class="title">总价：</span>{{item.price_all}}<span class="dw">(元)</span>
						</view>
						<view class="zj">
							<span class="title">添加人：</span>{{item.real_name}}<span class="dw"></span>
						</view>
					</view>
				</view>
				<view class="finace-foot">
					<span class="time">时间：{{item.date_time}}</span>
					<view class="btn-box">
						<span @click="edit(item.id)">修改</span>
						<span class="del" @click="del(item)">删除</span>
					</view>
				</view>
			</view>
			<view class="noInfo" v-if="!list.length">
				<i class="Ticonfont Ticon-zanwushuju"></i>
				<span>暂无数据</span>
			</view>
			
		</view>
		<div style="height:110rpx;"></div>
		<view class="foot">
			<button @click="add()">新增</button>
			<button class="export" @click="exports()">导出</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					size: 10,
					page: 1,
					type: 0,
					district: '',
					unt: 0,
					date_time: '',
				},
				list: [],
				value: 0,
				daterange: null,
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "收入"
					},
					{
						value: 2,
						text: "支出"
					},
				],
				ifno: {}
			}
		},
		mounted() {
			uni.$on('update', data => {
				this.data.page = 1
				this.list = []
				this.getlist();
				this.getdata();
			})
		},
		//为了优化代码，可以加上移除事件，避免重复监听事件
		onUnload() {
			// 移除监听事件  
			uni.$off('update');
		},
		created() {
			this.getlist();
			this.getdata();
		},
		methods: {
			getdata() {
				this.$H.get('/user/info').then(res => {
					if (res.status == 200) {
						this.info = res.data.userInfo
					}
				})
			},
			getlist() {
				uni.showLoading({
					title: '加载中'
				});
				this.status = 'loading'
				this.$H.get('/finance/list', this.data).then(res => {
					this.status = 'loadmore'

					uni.hideLoading();

					res.data.list.data.forEach(item => {
						this.list.push(item);
					});
					this.data.page++;
				})
			},

			change(e) {
				this.data.unt = e;
				this.data.page = 1;
				this.list = [];
				this.getlist();
			},

			onReachBottom() {
				this.getlist();
			},
			add() {
				uni.navigateTo({
					url: '/pages/my/my-finance-add'
				})
			},
			maskClick() {
				this.data.page = 1;
				this.list = [];
				this.getlist();
			},

			del(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认删除该条信息吗？',
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确定按钮
							_this.$H.get('/finance/del', {
								id: item.id
							}).then(res => {
								if (res.status == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});

									setTimeout(() => {
										_this.list = [];
										_this.show = false;
										_this.data.page = 1;
										_this.getlist();
									}, 1500);
								} else {

								}
							})
						} else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 导出
			exports() {
				this.$H.get('/finance/companyexpload', {
					id:this.info.user_id,
					type:1
				}).then(res => {
					if(res.status == 200) {
						uni.downloadFile({
							url: res.data.data,
							success: function(res) {
								uni.showToast({
									title: '成功！',
									icon: "success"
								})
								uni.saveFile({
									tempFilePath: res.tempFilePath, //文件的临时路径
									success: function(res) {
										const savedFilePath = res.savedFilePath;
										// 打开文件
										uni.openDocument({
											filePath: savedFilePath,
											success: function(res) {
												uni.hideLoading()
											},
											fail: function(res) {},
											complete: function(res) {
												setTimeout(uni.hideLoading(), 4000)
											},
										});
									},
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '下载失败',
									icon: "none"
								})
								console.log('下载失败：', err);
							}
						
						})
					}
				})
			},
			edit(id) {
				uni.navigateTo({
					url: '/pages/my/my-finance-edit?id=' + id
				})
			},
			// 下载附件
			downloadFile(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						uni.showToast({
							title: '成功！',
							icon: "success"
						})
						uni.saveFile({
							tempFilePath: res.tempFilePath, //文件的临时路径
							success: function(res) {
								const savedFilePath = res.savedFilePath;
								// 打开文件
								uni.openDocument({
									filePath: savedFilePath,
									success: function(res) {
										uni.hideLoading()
									},
									fail: function(res) {},
									complete: function(res) {
										setTimeout(uni.hideLoading(), 4000)
									},
								});
							},
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '下载失败',
							icon: "none"
						})
						console.log('下载失败：', err);
					}

				})
			},
		}
	}
</script>

<style lang="scss">
	.noInfo {
		text-align: center;
		color: #666;
		margin: 300rpx auto;
	}

	.Ticonfont {
		display: inline-block;
	}

	.Ticon-zanwushuju {
		font-size: 100rpx;
		color: #666;
		text-align: center;
		display: block;
	}

	page {
		background: #f5f5f5;
	}

	.finance-list {
		padding: 0rpx 20rpx;
	}

	.finance-item {
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx 0px;

		.finace-top {
			height: 70rpx;
			padding: 0px 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
			align-items: center;

			.Ticonfont {
				color: green;
				margin-right: 10rpx;
			}

			.name {
				font-weight: bold;
				font-size: 32rpx;
			}

			.time {
				color: #666;
			}
		}

		.finace-cont {
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;

		}

		.cont-top {
			// display: flex;
			// justify-content:space-around ;
			color: red;
			font-size: 28rpx;

			.title {
				font-weight: bold;
				color: #333;
			}

			.dw {
				font-size: 24rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.finace-foot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #f1f1f1;
			padding: 0px 20rpx;

			.time {
				color: #666;
			}

			font-size: 28rpx;
		}

		.btn-box {
			display: flex;
			// width: 100%;

			span {
				display: block;
				padding: 10rpx 20rpx;
				border: 1px solid green;
				border-radius: 10rpx;
				margin: 10rpx 0px;
				color: green;
				font-size: 24rpx;
				margin-left: 20rpx;

			}

			.del {
				color: red;
				border: 1px solid red;
			}
		}
	}

	.foot {
		position: fixed;
		bottom: 0px;
		height: 100rpx;
		display: flex;
		width: 100%;

		button {
			width: 50%;
			background: #17BF8B;
			color: #fff;
			border-radius: 0px;
		}

		.export {
			background: #0B88E2;

		}
	}

	.finace-header {
		display: flex;
		background: #fff;
		align-items: center;
	}
</style>